<!--项目收尾--完结项目库-->
<template>
  <div class="contract-content">
    <div class="card-title">完结项目</div>
    <div class="top-search">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="项目名称" prop="entryName">
          <el-input
            v-model="queryParams.entryName"
            placeholder="请输入项目名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="项目编号" prop="entryNumber">
          <el-input
            v-model="queryParams.entryNumber"
            placeholder="请输入项目编号"
            clearable
          />
        </el-form-item>
        <el-form-item label="项目类型" prop="entryType">
          <el-select v-model="queryParams.entryType" placeholder="项目类型" clearable>
            <el-option
              v-for="item in entryTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom-container">
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="left-tree">
            <el-input
              placeholder="输入关键字"
              v-model="filterText"
              suffix-icon="el-icon-search"
            >
            </el-input>
            <el-tree
              class="filter-tree"
              :data="treeData"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              ref="tree"
            >
            </el-tree>
          </div>
        </el-col>
        <el-col :span="20">
          <div style="height: 100%">
            <el-table :data="tableData" style="width: 100%;" @row-click="handleRowClick">
              <el-table-column prop="id" label="序号" width="120"></el-table-column>
              <el-table-column prop="entryName" label="项目名称"></el-table-column>
              <el-table-column prop="entryNumber" label="项目编号" width="150"></el-table-column>
              <el-table-column prop="startTime" label="开始日期"></el-table-column>
              <el-table-column prop="endTime" label="结束日期"></el-table-column>
              <el-table-column prop="duration" label="工期"></el-table-column>
              <el-table-column prop="status" label="结束状态"></el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="4"
              style="float: right; margin: 20px 0;">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="60%"
      :close-on-click-modal="false"
    >
      <project-archives :row="selectedRow"></project-archives>
    </el-dialog>
  </div>
</template>

<script>
import projectArchives from '@/views/projectInitiation/components/projectArchives'

export default {
  name: 'completeProjectLibrary',
  components: {projectArchives},
  data(){
    return{
      queryParams: {
        entryName: '',
        entryNumber: '',
        entryType: undefined
      },
      entryTypeOptions: [
        { label: '防沙治沙', value: '0' },
        { label: '植树造林', value: '1' },
        { label: '绿化改造', value: '2' },
        { label: '机器人造林', value: '3' }
      ],
      filterText: '',
      treeData: [{
        id: 1,
        label: '项目类型',
        children: [
          {
            id: 2,
            label: '防沙治沙'
          },
          {
            id: 3,
            label: '植树造林'
          },
          {
            id: 4,
            label: '绿化改造'
          },
          {
            id: 5,
            label: '机器人造林'
          }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      currentPage: 1,
      tableData:[
        {
          id: '1',
          entryName: '风光一体化防沙治沙',
          entryNumber:'KYXM20220015',
          startTime:'2023-06-01',
          endTime:'2023-12-31',
          duration:'180',
          status:'完成'
        },
        {
          id: '2',
          entryName: '三北六期',
          entryNumber:'KYXM20220016',
          startTime:'2023-06-01',
          endTime:'2023-12-31',
          duration:'180',
          status:'完成'
        },
        {
          id: '3',
          entryName: '蚂蚁森林',
          entryNumber:'KYXM20220017',
          startTime:'',
          endTime:'',
          duration:'0',
          status:'终止'
        },
        {
          id: '4',
          entryName: '蓝旗机器人造林',
          entryNumber:'KYXM20220018',
          startTime:'',
          endTime:'',
          duration:'0',
          status:'终止'
        },
      ],
      dialogVisible: false,
      dialogType:'',
      selectedRow:{}
    }

  },
  methods:{
    /** 搜索按钮操作 */
    handleQuery() {
      //this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
    },

    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleRowClick(row, column, event){
      this.selectedRow = row;
      this.dialogVisible = true;
      this.dialogType = '1'
    },
  }
}
</script>

<style scoped lang=scss>
.contract-content {
  background: #ffffff;
  margin-bottom: 16px;
  box-sizing: border-box;
  border-radius: 5px 5px 0 0;
  border: 1px solid #e7eff3;
  box-shadow: 0 0 5px #dde9ef;
}

.card-title {
  color: #11A983;
  border-bottom: 0;
  font-weight: 600;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 1px;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 45px;
  padding: 10px 20px 0;
  border-radius: 3px;
}

.top-search {
  padding: 16px 20px;
}

.bottom-container {
  margin-top: 10px;
  padding: 0 20px;
}

</style>
